<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="width: 830px; height: 480px"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <!-- 
    1.导入了一个中国的 geo json
    window.china_geojson = {}
  -->
    <script src="../lib/geojson/china_geojson.js"></script>
    <script>
      window.onload = function () {
        const mapName = '中国'
        // 2.注册一下中国地图的 geo json ( 需要在setOption之前调用 )
        echarts.registerMap(mapName, { geoJSON: china_geojson })

        const myChart = echarts.init(document.getElementById('main'))

        const data = [
          { name: '北京', value: 199 },
          { name: '天津', value: 42 },
          { name: '河北', value: 102 },
          { name: '山西', value: 81 },
          { name: '内蒙古', value: 47 },
          { name: '辽宁', value: 67 },
          { name: '吉林', value: 82 },
          { name: '黑龙江', value: 123 },
          { name: '上海', value: 154 },
          { name: '江苏', value: 102 },
          { name: '浙江', value: 114 },
          { name: '安徽', value: 109 },
          { name: '福建', value: 116 },
          { name: '江西', value: 91 },
          { name: '山东', value: 119 },
          { name: '河南', value: 137 },
          { name: '湖北', value: 116 },
          { name: '湖南', value: 114 },
          { name: '重庆', value: 101 },
          { name: '四川', value: 125 },
          { name: '贵州', value: 62 },
          { name: '云南', value: 83 },
          { name: '西藏', value: 9 },
          { name: '陕西', value: 80 },
          { name: '甘肃', value: 56 },
          { name: '青海', value: 10 },
          { name: '宁夏', value: 18 },
          { name: '新疆', value: 120 },
          { name: '广东', value: 193 },
          { name: '广西', value: 59 },
          { name: '海南', value: 14 }
        ]

        /*获取地图数据*/
        myChart.showLoading()

        // 1.先拿到地图的 geo json 对象
        const geoCoordMap = echarts
          .getMap(mapName)
          .geoJson.features.reduce((accumulate, currentValue) => {
            // 地区名称， 地区经纬度
            accumulate[currentValue.properties.name] = currentValue.properties.cp
            return accumulate
          }, {})

        myChart.hideLoading()
        console.log('geoCoordMap=>', geoCoordMap)

        const coverData = data =>
          data.map(item => {
            const geoRecord = geoCoordMap[item.name]
            return geoRecord
              ? {
                  name: item.name,
                  value: [...geoRecord, item.value]
                }
              : undefined
          })

        // 2.指定图表的配置项和数据
        const option = {
          tooltip: {}, // 提示框

          visualMap: {
            // 视觉映射组件
            left: '20%',
            seriesIndex: [0],
            inRange: {
              color: ['#04387b', '#467bc0'] // 蓝绿
            }
          },

          geo: {
            // 注册一个地理坐标系组件( 给散点图用 )
            map: mapName,
            roam: false,
            layoutCenter: ['50%', '50%'],
            layoutSize: 600,
            label: { show: false },
            aspectScale: 0.75, // 缩放地图
            itemStyle: {
              areaColor: '#023677',
              borderColor: '#1180c7'
            },
            emphasis: {
              itemStyle: { areaColor: '#4499d0' },
              label: { color: 'white' }
            }
          },
          series: [
            {
              name: '中国地图',
              type: 'map',
              map: mapName,
              data, // 给地图填充数据
              geoIndex: 0,

              // 地图样式
              itemStyle: {
                areaColor: '#023677',
                borderColor: '#1180c7'
              },
              emphasis: {
                itemStyle: { areaColor: '#4499d0' },
                label: { color: 'white' }
              },
              select: {
                label: { color: 'white' },
                itemStyle: { areaColor: '#4499d0' }
              }
              // 地图样式
            },
            {
              name: '散点图充电桩',
              type: 'effectScatter',
              // 散点图使用的坐标系: geo 定义的坐标系组件
              geoIndex: 0,
              coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
              data: coverData(data),
              symbolSize: function (val) {
                return val[2] / 10
              },
              itemStyle: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
              },
              tooltip: {
                show: true,
                trigger: 'item',
                formatter: function (params) {
                  console.log('params:', params)
                  const data = params.data
                  return `${params.seriesName} <div style="margin:5px 0px;"/> ${data.name} ${data.value[2]}`
                }
              }
            }
          ]
        }

        myChart.setOption(option)
      }
    </script>
  </body>
</html>
